<template>
  <f-popup class="picker" :show-flag="showFlag" @update:showFlag="hidePopup" position="bottom">
    <slot name="opt">
      <div class="opt-box">
        <f-button size="mini" type="text" color="gray" @click="hidePopup">取消</f-button>
        <slot name="title"></slot>
        <f-button size="mini" type="text" @click="handleSubmit">确定</f-button>
      </div>
    </slot>
    <slot name="top"></slot>
    <f-scroll-box>
      <f-scroll-list
        v-for="(list,index) in dataList"
        @change="handleChange($event,index)"
        :key="index"
        :data-list="list"
        :default-props="defaultProps"
        v-model="result[index]"
        v-bind='$attrs'>
      </f-scroll-list>
    </f-scroll-box>
    <slot name="bottom"></slot>
  </f-popup>
</template>

<script>
import FScrollBox from './scroll/scroll-box';
import FScrollList from './scroll/scroll-list';
import {Validate} from 'js-utils/validate';

export default {
  name: 'f-picker',
  components: {FScrollList, FScrollBox},
  props: {
    dataList: {
      type: Array,
      default: () => ([])
    },
    value: {
      type: Array,
      default: () => ([])
    },
    showFlag: {
      type: Boolean,
      default: false
    },
    defaultProps: {
      type: Object,
      default: () => ({value: 'value', text: 'text'})
    }
  },
  watch: {
    value(value) {
      if (value) {
        this.result = [...this.value] || [];
      }
    }
  },
  data() {
    return {
      result: [...this.value]
    };
  },
  methods: {
    handleChange({value, index}, columnIndex) {
      this.$emit('change', {value, columnIndex, rowIndex: index});
    },
    handleSubmit() {
      this.dataList.forEach((data, i) => {
        if (Validate.isEmpty(this.result[i])) {
          this.result[i] = data[0];
        }
      });
      this.$emit('input', this.result);
      this.$emit('submit', this.result);
      this.hidePopup();
    },
    hidePopup() {
      this.$emit('update:showFlag', false);
    }
  },
  mounted() {

  }
};
</script>

<style lang="scss" scoped>
.picker {
  .opt-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.4rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0 0.1rem;
  }

  /deep/ .popup.bottom {
    padding: 0;

    .popup-title {
      display: none;
    }
  }
}
</style>
